<template>
  <div class="table-wrap">
    <el-table
      ref="multipleTable"
      v-loading="pageInfo.loading"
      :data="listData"
      border
      height="300px"
      v-bind="childrenProps"
      @selection-change="handleSelectChange"
    >
      <el-table-column
        v-if="showSelectColumn"
        type="selection"
        width="60"
        align="center"
        :selectable="selectable"
      />
      <!--
      <el-table-column
        v-if="showindexcolumn"
        type="index"
        label="序号"
        width="80"
        align="center"
      />
      -->
      <el-table-column
        v-for="item in propList"
        :key="item.prop"
        v-bind="item"
        align="center"
        show-overflow-tooltip
      >
        <template #default="scope">
          <slot :name="item.slotName" :row="scope.row">
            {{ scope.row[item.prop] || "-" }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="showFooter" class="footer">
      <slot name="footer">
        <el-pagination
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          layout="total, prev, pager, next, jumper"
          @size-change="handleTableSizeChange('pageInfo', $event)"
          @current-change="handleTableCurrentChange('pageInfo', $event)"
        />
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showIndexColumn: {
      type: Boolean,
      default: false,
    },
    showSelectColumn: {
      type: Boolean,
      default: false,
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    listData: {
      type: Array,
      default: () => [],
    },
    propList: {
      type: Array,
      required: true,
    },
    pageInfo: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        total: 0,
      }),
    },
    childrenProps: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    handleTableSizeChange(tableName, val) {
      const table = this[tableName];
      table.pageSize = val;
      if (table.total > (table.currentPage - 1) * table.pageSize) {
        this.$emit("pageSizeChange", true);
      }
    },
    handleTableCurrentChange(tableName, val) {
      const table = this[tableName];
      table.currentPage = val;
      this.$emit("pageSizeChange", true);
    },
    handleSelectChange(val) {
      this.$emit("selectionChange", val);
    },
    selectable(row) {
      return !row.disabled;
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
</style>
